<script setup>
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
import { loadLanguageAsync } from '@/i18n/index.js'
import useAppStore from '@/store/modules/app.js'

const appStore = useAppStore()
const options = reactive([
  {
    label: 'English',
    key: 'en',
    iconName: 'emojione:flag-for-united-states',
    icon: renderIcon('emojione:flag-for-united-states'),
  },
  {
    label: '中文',
    key: 'zh-CN',
    iconName: 'emojione:flag-for-china',
    icon: renderIcon('emojione:flag-for-china'),
  },
  {
    // 法语
    label: 'Français',
    key: 'fr',
    iconName: 'emojione:flag-for-france',
    icon: renderIcon('emojione:flag-for-france'),
  },
  {
    // 西班牙语
    label: 'Español',
    key: 'es',
    iconName: 'emojione:flag-for-spain',
    icon: renderIcon('emojione:flag-for-spain'),
  },
  {
    // 俄语
    label: 'Русский',
    key: 'ru',
    iconName: 'emojione:flag-for-russia',
    icon: renderIcon('emojione:flag-for-russia'),
  },
  {
    //   阿拉伯语
    label: 'العربية',
    key: 'ar',
    iconName: 'emojione:flag-for-saudi-arabia',
    icon: renderIcon('emojione:flag-for-saudi-arabia'),
  },
])
const animationStart = ref(false)
// const settingStore = useSettingsStore()
// const route = useRoute()
const langCode = ref(appStore.language)
function changeLocale(code) {
  langCode.value = code
  animationStart.value = true
  loadLanguageAsync(code)
  setRtl(code)
  appStore.setLanguage(code)
  appStore.reloadPage()
  setTimeout(() => {
    animationStart.value = false
  }, 2000)
}

const selectIcon = computed(() => {
  return options.find(item => item.key === appStore.language).iconName
})
const selectLabel = computed(() => {
  return options.find(item => item.key === appStore.language).label
})

function setRtl(code) {
  // document.documentElement.style.direction = code === 'ar' ? 'rtl' : 'ltr'
  // document.documentElement.dir = code === 'ar' ? 'rtl' : 'ltr'
}

function renderIcon(icon) {
  return () => {
    return h(SvgIcon, {
      name: icon,
      style: 'font-size: 19px',
    })
  }
}
</script>

<template>
  <n-dropdown
    placement="bottom"
    trigger="click"
    :options="options"
    size="large"
    @select="changeLocale"
  >
    <n-button text>
      <template #icon>
        <SvgIcon
          :name="selectIcon"
          class="text-[25px]"
        />
      </template>
<!--      <span class="ml-2">-->
<!--        {{ selectLabel }}-->
<!--      </span>-->
    </n-button>
  </n-dropdown>
</template>

<style lang="scss" scoped>
//:deep(.active){
//  background-color: var(--el-dropdown-menuItem-hover-fill);
//  color: var(--el-dropdown-menuItem-hover-color);
//}
//.animate__flip{
//  animation: flipHorizontal 2s infinite;;
//}
//@keyframes flipHorizontal {
//  50% {
//    transform: rotateY(180deg);
//  }
//}
</style>
